<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title th:text="${claimType.name() == 'CLAIM_FOUND' ? '认领物品' : '提交找到物品'}">提交申请</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <div class="container py-4">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h4 class="mb-0" th:text="${claimType.name() == 'CLAIM_FOUND' ? '认领物品' : '提交找到物品'}">提交申请</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="flex-shrink-0">
                                        <img th:if="${item.imagePath}" th:src="${item.imagePath}" alt="物品图片" class="img-thumbnail" style="width: 100px; height: 100px; object-fit: cover;">
                                        <div th:unless="${item.imagePath}" class="bg-light d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                                            <i class="fas fa-image text-muted fa-2x"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h5 class="card-title" th:text="${item.title}">物品标题</h5>
                                        <p class="card-text text-muted mb-0">
                                            <span class="badge" th:classappend="${item.status.name() == 'LOST' ? 'bg-danger' : 'bg-success'}" th:text="${item.status.displayName}">状态</span>
                                            <span class="badge bg-secondary" th:text="${item.type.displayName}">类型</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="alert" th:classappend="${claimType.name() == 'CLAIM_FOUND' ? 'alert-info' : 'alert-warning'}">
                                    <i class="fas" th:classappend="${claimType.name() == 'CLAIM_FOUND' ? 'fa-info-circle' : 'fa-exclamation-circle'}" aria-hidden="true"></i>
                                    <span th:if="${claimType.name() == 'CLAIM_FOUND'}">
                                        您正在认领这个物品。请提供尽可能详细的描述，以便物品发布者确认这是您的物品。
                                    </span>
                                    <span th:unless="${claimType.name() == 'CLAIM_FOUND'}">
                                        您正在提交找到此失物的信息。请上传物品照片并提供详细描述，以便失主确认。
                                    </span>
                                </div>
                            </div>
                            
                            <form th:action="@{/claims/create}" method="post" enctype="multipart/form-data" th:object="${claimDTO}">
                                <input type="hidden" th:field="*{itemId}">
                                <input type="hidden" th:field="*{claimerId}">
                                <input type="hidden" th:field="*{claimType}">
                                
                                <div class="mb-3">
                                    <label for="description" class="form-label">
                                        <span th:if="${claimType.name() == 'CLAIM_FOUND'}">认领描述</span>
                                        <span th:unless="${claimType.name() == 'CLAIM_FOUND'}">找到物品的描述</span>
                                    </label>
                                    <textarea id="description" th:field="*{description}" class="form-control" rows="4" required
                                              th:placeholder="${claimType.name() == 'CLAIM_FOUND' ? '请详细描述物品的特征，以便确认物品归属...' : '请详细描述您在哪里找到此物品，物品状态如何...'}"></textarea>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="image" class="form-label">
                                        <span th:if="${claimType.name() == 'CLAIM_FOUND'}">上传证明图片（可选）</span>
                                        <span th:unless="${claimType.name() == 'CLAIM_FOUND'}">上传物品照片</span>
                                    </label>
                                    <input type="file" id="image" name="image" class="form-control" accept="image/*"
                                           th:required="${claimType.name() != 'CLAIM_FOUND'}">
                                    <div class="form-text">
                                        <span th:if="${claimType.name() == 'CLAIM_FOUND'}">如有可以证明物品归属的图片，请上传（如购买凭证、使用照片等）</span>
                                        <span th:unless="${claimType.name() == 'CLAIM_FOUND'}">请上传清晰的物品照片，以便失主确认</span>
                                    </div>
                                </div>
                                
                                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                    <a th:href="@{/items/{id}(id=${item.id})}" class="btn btn-outline-secondary me-md-2">取消</a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-paper-plane me-1"></i>
                                        <span th:if="${claimType.name() == 'CLAIM_FOUND'}">提交认领</span>
                                        <span th:unless="${claimType.name() == 'CLAIM_FOUND'}">提交找到信息</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 